<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cssfour</title>
</head>
<style>

  .one{
    width: 200px;
    height: 200px;
    background-color: orange;
    overflow: hidden;  /*解决盒子塌陷问题*/
    display: inline-block;/*解决盒子塌陷问题*/
    /*盒子塌陷问题:我的理解是盒子出现在不该出现的地方叫盒子塌陷*/
  }
.two{
  margin-top: 50px ;
  width: 100px;
  height: 100px;
  background-color: pink;
}
/*选中第一个子标签选择器*/
li:first-child{
  background-color: green;
}
  /*选中最后一个子标签选择器*/
li:last-child{
  background-color: orange;
}
  /*选中第3个子标签选择器nth-child(可以写公式)*/
li:nth-child(3){
  background-color: deepskyblue;
}
  /*选中倒数第二个子标签选择器*/
li:nth-last-child(2){
  background-color: red;
}
  /*选中2的倍数的子标签选择器*/
.o li:nth-child(2n){
  background-color: deepskyblue;
}
.on{
  width: 300px;
  height: 300px;
  background-color: deepskyblue;
}
/*伪元素:默认是行内元素，要转换为块或行内块*/
/*在父元素内容的最前面加上属性*/
.on::before{
  content: '你好';
}
  /*在父元素内容的最后面加上属性*/
  .on::after{
    content: 'word';
    display: block; /*转换为块*/
    display: inline-block; /*转换为行内块*/
    width: 100px;
    height: 100px;
    background-color: orange;
    padding: 20px;
    margin: 0 10px;
    border: solid pink 2px;
    text-align: center ;
    text-decoration: none;
    font-style: normal;
    font-family: 楷体;
    font-size: large;
    font-weight: bold;
    text-decoration: none;
  }
</style>
<body>
<div class="one">
    <div class="two"></div>
</div>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>
<ol class="o">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol>

<!--伪元素：-->
<div class="on">hello</div>
<script>

</script>
</body>
</html>
